<template>
  <div id="app">
    <header>
      <div class="logo">
        <div class="item" style="border-left: 1px solid #da515b">
          <el-icon :size="80" color="#da515b"> <postcard /> </el-icon>
          <div>
            <p>硬件版本</p>
            <p>v1.0.0.0</p>
          </div>
        </div>

        <div class="item" style="border-left: 1px solid #34cabf">
          <el-icon :size="80" color="#34cabf"> <list /> </el-icon>
          <div>
            <p>版本软件</p>
            <p>v1.0.0.0</p>
          </div>
        </div>

        <!-- <div class="item" style="border-left: 1px solid #feb570">
          <el-icon :size="80" color="#feb570"> <coin /> </el-icon>
          <div>
            <p>产品型号</p>
            <p>IP SEC VPM</p>
          </div>
        </div> -->

        <!-- <div class="item" style="border-left: 1px solid #6cb3e9">
          <el-icon :size="80" color="#6cb3e9"> <magicStick /> </el-icon>
          <div>
            <p>网卡地址</p>
            <p>ZCW01001</p>
          </div>
        </div> -->

        <div class="item" style="border-left: 1px solid #1f6aa1">
          <el-icon :size="80" color="#1f6aa1"> <clock /> </el-icon>
          <div>
            <p>系统时间</p>
            <p>{{ current_time }}</p>
          </div>
        </div>

        <div class="item" style="border-left: 1px solid #c577ff">
          <el-icon :size="80" color="#c577ff"> <clock /> </el-icon>
          <div>
            <p>系统运行</p>
            <p>{{ run_time }}</p>
          </div>
        </div>

        <div
          v-for="item in link"
          class="item"
          style="border-left: 1px solid #6cb3e9"
        >
          <el-icon :size="80" color="#6cb3e9"> <burger /> </el-icon>
          <div>
            <p>网卡连接状态</p>
            <p>{{ item.net_name }}</p>
            <p>{{ item.link }}</p>
          </div>
        </div>
      </div>
    </header>

    <section class="chart">
      <div class="cpu">
        <p>CPU占用率</p>
        <cpu-chart />
      </div>
      <div class="circle">
        <p>内存占用率</p>
        <internals />
      </div>
    </section>
  </div>
</template>

<script>
import CpuChart from "../../components/charts/cpuChart.vue";
import internals from "../../components/charts/internals.vue";
import request from "../../http/request";
import { onMounted, reactive, toRefs, nextTick } from "vue";
import {
  Postcard,
  List,
  Coin,
  MagicStick,
  Clock,
  Monitor,
  Burger,
} from "@element-plus/icons-vue";

export default {
  components: {
    Postcard,
    List,
    Coin,
    MagicStick,
    Clock,
    Monitor,
    Burger,
    CpuChart,
    internals,
  },
  setup() {
    const res = reactive({
      link: [],
      current_time: "",
      run_time: "",
    });
    onMounted(async () => {
     
      const userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
      let arr = [];
      const result = await request.tik();
       const list = await request.getNetwork({
        user_id: userInfo.user_id,
      });
      
      res.current_time = result.data.data[0].current_time;
      res.run_time = result.data.data[1].run_time;
      (list.data.data).forEach(async (element) => {
        const { data } = await request.has_network({
          net_name: element.netname.split('(')[0],
          user_id: userInfo.user_id,
        });

        arr.push(data.data[0]);
        const map = arr.map((item) => {
         
          if (item.link == "yes") {
            //console.log(111);
            return { net_name: item.net_name, link: "已连接" };
          } else {
            console.log(2222);
            return { net_name: item.net_name, link: "未连接" };
          }
        });
        res.link = map;
      });
    });
    return {
      ...toRefs(res),
    };
  },
};
</script>

<style lang='scss' scoped>
#app {
  background: #f8f8f8;
  width: 100%;
  padding: 10px;
}

header .logo {
  display: flex;
  flex-wrap: wrap;
  width: 800px;
}
.item {
  margin-right: 50px;
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  display: flex;
  // justify-content: space-around;
  padding: 0 5px;
  align-items: center;
  background: #fff;
  border-radius: 2px;
  div p {
    margin-bottom: 10px;
    margin-left: 5px;
  }
  div p:last-child {
    color: #a0a0a0;
    font-size: 14px;
  }
}
.chart {
  display: flex;
  margin-top: 10px;
  .cpu,
  .circle {
    width: 500px;
    border: 1px solid #d7d7d7;
    margin-right: 20px;
    p {
      height: 30px;
      padding-left: 10px;
      line-height: 30px;
      font-weight: bold;
      background: #dedede;
      font-size: 14px;
    }
  }
  .circle {
    width: 200px;
  }
}
</style>